<template>
  <el-pagination class="pagination-container" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    currentPage: {
      type: Number,
      default: () => {},
    },
    pageSize: {
      type: Number,
      default: () => {},
    },
    total: {
      type: Number,
      default: () => [],
    },
  },
  data() {
    return {
      pageParam: {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
    }
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      this.pageParam.pageSize = val
      this.$emit('handleChange', this.pageParam)
    },
    handleCurrentChange(val) {
      this.pageParam.currentPage = val
      this.$emit('handleChange', this.pageParam)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  text-align: right;
  margin: 20px
}
</style>
